<template>
  <div class="app-container">
       <search-bar :search="searchParams" @on-search="search">
        <el-form
          inline
          :label-position="'left'"
          :model="searchParams"
          class="search-form-inline"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同号">
                <el-input
                  v-model="searchParams.orderNo"
                  placeholder="合同号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称">
                <el-input
                  v-model="searchParams.customerName"
                  placeholder="客户名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同状态">
                <el-select
                  v-model="searchParams.status"
                  placeholder="合同状态"
                  clearable>
                 <el-option v-for="item in contractStatus" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
       </search-bar>
       <div>
         <el-button type="success" @click="toAdd" icon="wp wp-icon-save">新建合同</el-button>
       </div>
        <page-table
        :WP_MaxHeight="300"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column  fixed width="150" label="合同名称"  prop="contractName" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary" @click.native="toDetail(scope.row)"> {{scope.row.contractName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="orderNo" width="120" show-overflow-tooltip>
          <template slot-scope="scope">
           <el-link type="primary" @click.native="toOrder(scope.row)"> {{scope.row.orderNo}}</el-link>
        </template>
      </el-table-column>
        <el-table-column label="合同状态" prop="statusName"></el-table-column>
      <el-table-column label="客户名称" prop="customerName" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
           <el-link type="primary" @click="toCustomerDetail(scope.row)"> {{scope.row.customerName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="合同商定日期"  width="120" prop="contractDealDate">
        <template slot-scope="scope">
          {{scope.row.contractDealDate | FormatDate('yyyy-MM-dd')}}
        </template>
      </el-table-column>
      <el-table-column label="合同完成时间" width="120" prop="contractCompletionTime">
        <template slot-scope="scope">
          {{scope.row.contractCompletionTime | FormatDate('yyyy-MM-dd')}}
        </template>
      </el-table-column>
      <el-table-column label="负责人" prop="chargePersonName"></el-table-column>
      <el-table-column label="创建人" prop="creatorName" show-overflow-tooltip></el-table-column>
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip></el-table-column>
      </page-table>
      <CreatePanel v-if="visibleCreate"  :visible.sync="visibleCreate" :data="contractInfo" :title="title" @afterSave="search"/>
      <DetailPanel
      v-if="visibleDetail"
      :show.sync="visibleDetail"
      :data.sync="detailData"></DetailPanel>
      <Sale-order-detail-panel
            v-if="showSalesOrderDetail"
              sourceType="contract"
             :show.sync="showSalesOrderDetail"
             :data.sync="contractInfo"/>
        <CustomerDetailPanel sourceType="contract" :param="customerInfo"  :show.sync="showCustomerDetail"/>
  </div>
</template>
<script>
import SaleOrderDetailPanel from '@/views/eims/sales/order/components/DetailPanel'
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import CustomerDetailPanel from '@/views/crm/customer/components/DetailPanel'
import CreatePanel from './components/CreatePanel'
import DetailPanel from './components/DetailPanel'
import Mixins from './mixins'
export default {
  components: {SearchBar, PageTable, CreatePanel, DetailPanel, SaleOrderDetailPanel, CustomerDetailPanel},
  mixins: [Mixins],
  data () {
    return {
      id: 'contract',
      showSalesOrderDetail: false,
      showCustomerDetail: false,
      visibleCreate: false,
      visibleDetail: false,
      title: '',
      contractInfo: {},
      detailData: {},
      customerInfo: {},
      contractStatus: []
    }
  },
  mounted () {
    this.search()
    this.contractStatus = this.getContractStatus()
  },
  methods: {
    toAdd () {
      this.visibleCreate = true
      this.title = '新建合同'
    },
    toOrder (row) {
      this.showSalesOrderDetail = true
      this.contractInfo = {...row}
    },
    toDetail (row) {
      this.visibleDetail = true
      this.detailData = {...row}
    },
    toCustomerDetail (row) {
      this.customerInfo = {customerCode: row.customerCode}
      this.showCustomerDetail = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
